<script setup lang="ts">
import { ref, markRaw, reactive } from "vue";
import ReCol from "@/components/ReCol";
// import { useDark, randomGradient } from "./utils";
// import WelcomeTable from "./components/table/index.vue";
// import { ReNormalCountTo } from "@/components/ReCountTo";
// import { useRenderFlicker } from "@/components/ReFlicker";
// import { ChartBar, ChartLine, ChartRound } from "./components/charts";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { chartData, barChartData, progressData, latestNewsData } from "./data";
import AppUtil from "@/utils/AppUtil";
import GroupLine from "@iconify-icons/ri/group-line";
import Question from "@iconify-icons/ri/question-answer-line";
import CheckLine from "@iconify-icons/ri/chat-check-line";
import Smile from "@iconify-icons/ri/star-smile-line";
import onlineUser from "@iconify-icons/ep/user-filled";
import money from "@iconify-icons/ep/money";
import users from "@iconify-icons/ri/user-2-fill";
import orders from "@iconify-icons/ri/shopping-cart-2-fill";

import * as echarts from "echarts";

defineOptions({
  name: "Welcome"
});
const state = reactive({
  numObj: {
    /**当天新增用户数 */
    dayAddNewUser: 0,
    /**当月新增用户数 */
    monthAddNewUser: 0,
    /**当月消费金额（分） */
    monthAmount: 0,
    /**当月订单数 */
    monthOrders: 0,
    /**线上用户数 */
    onlineUserTotal: 0,
    /**总消费金额（分） */
    orderTotalAmount: 0,
    /**总订单数 */
    ordersTotalNumber: 0,
    /**复购用户数	 */
    repeatPurchases: 0
  },
  // newData: {
  //   startDate: "2024-11-01 00:00:00",
  //   endDate: "2024-11-30 23:59:59"
  // },
  /** 新增用户时间区间*/
  newDate: [],
  orderDate: []
});
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();

      start.setDate(start.getDate() - 7);
      return [start, end];
    }
  },
  {
    text: "近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    }
  }
];
const numMsg = {
  dayAddNewUser: {
    name: "今日新增用户",
    icon: GroupLine,
    color: "#f56c6c",
    value: 0
  },
  monthAddNewUser: {
    name: "本月新增用户",
    icon: Question,
    color: "#e6a23c",
    value: 0
  },
  monthAmount: {
    name: "本月消费金额",
    icon: CheckLine,
    color: "#67c23a",
    value: 0
  },
  monthOrders: {
    name: "本月订单数",
    icon: Smile,
    color: "#67c233",
    value: 0
  },
  onlineUserTotal: {
    name: "线上用户数",
    icon: onlineUser,
    color: "#67cc3a",
    value: 0
  },
  offlineUserTotal: {
    name: "线下用户数",
    icon: users,
    color: "#67cc3a",
    value: 0
  },
  orderTotalAmount: {
    name: "总消费金额",
    icon: money,
    color: "#409EFF",
    value: 0
  },
  repeatPurchases: {
    name: "复购用户数",
    icon: users,
    color: "#409E99",
    value: 0
  },
  ordersTotalNumber: {
    name: "总订单数",
    icon: orders,
    color: "#449EFF",
    value: 0
  }
};

AppUtil.request(
  {
    url: "/api/v1/count/home/sis"
  },
  res => {
    // console.log("res", res);
    state.numObj = res.data;
  }
);
state.newDate = shortcuts[0].value();
state.orderDate = shortcuts[0].value();
/**请求新增用户数 */
function req_new() {
  AppUtil.request(
    {
      url: "/api/v1/count/new-user",
      params: {
        startDate: AppUtil.get_date(state.newDate[0]),
        endDate: AppUtil.get_date(state.newDate[1])
      },
      headers: { "Content-Type": "application/x-www-form-urlencoded" }
    },
    res => {
      console.log("res", res);
      var chartDom = document.getElementById("newline");
      var myChart = echarts.init(chartDom);

      let xArr = [];
      let yArr = [];
      res.data.forEach(item => {
        xArr.push(item.dateTime);
        yArr.push(item.addNewUserTotal * 1);
      });
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: xArr
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "新增用户",
            data: yArr,
            type: "line",
            smooth: true
          }
        ]
      });
      // state.numObj = res.data;
    }
  );
}
req_new();
/**请求新增订单 */
function req_order() {
  AppUtil.request(
    {
      url: "/api/v1/count/order",
      params: {
        startDate: AppUtil.get_date(state.orderDate[0]),
        endDate: AppUtil.get_date(state.orderDate[1])
      }
    },
    res => {
      console.log("res", res);
      var chartDom = document.getElementById("orderline");
      var myChart = echarts.init(chartDom);

      let xArr = [];
      let yArr = [
        { name: "订单数", type: "line", data: [], smooth: true },
        { smooth: true, name: "消费金额", type: "line", data: [] }
      ];
      res.data.forEach(item => {
        xArr.push(item.dateTime);
        yArr[0].data.push(item.ordersTotalNumber * 1);
        yArr[1].data.push(item.orderTotalAmount * 1);
      });
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: xArr
        },
        yAxis: {
          type: "value"
        },
        series: yArr
      });
      // state.numObj = res.data;
    }
  );
}
req_order();
</script>

<template>
  <div>
    <el-row :gutter="24" justify="flex-start">
      <re-col
        v-for="(item, index) in numMsg"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="4"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80
          }
        }"
      >
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <div class="w-8 h-8 flex justify-center items-center rounded-md">
              <IconifyIconOffline
                :icon="item.icon"
                :color="item.color"
                width="18"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div class="w-1/2">
              <p class="font-medium text-green-500">
                {{ state.numObj[index] }}
              </p>
            </div>
          </div>
        </el-card>
      </re-col>
    </el-row>
    <el-row :gutter="24" justify="space-around">
      <re-col
        v-motion
        class="mb-[18px]"
        :value="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">新增用户</span>

            <div>
              <el-date-picker
                v-model="state.newDate"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="req_new"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div
              id="newline"
              ref="chartRef"
              style="width: 100%; height: 400px"
            />
          </div>
        </el-card>
      </re-col>

      <re-col
        v-motion
        class="mb-[18px]"
        :value="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">订单统计</span>

            <div>
              <el-date-picker
                v-model="state.orderDate"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                @change="req_order"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div id="orderline" style="width: 100%; height: 400px" />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 解决概率进度条宽度 */
  .el-progress--line {
    width: 85%;
  }

  /* 解决概率进度条字体大小 */
  .el-progress-bar__innerText {
    font-size: 15px;
  }

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
